{extend name="layout/goods" /}
{block name="content"}
<!--主体-->
<div class="wy-content">
    <div class="category-top">
        <header class='weui-header'>
            {include file="common/search"}
        </header>
    </div>
    <aside>
        <div class="menu-left scrollbar-none" id="sidebar">
            <ul>
                {volist name="category" id="v" key="k"}
                <li {if condition="$k eq 1"}class="active"{/if} data-id="{$v.id}">{$v.name}</li>
                {/volist}
            </ul>
        </div>
    </aside>
    <section class="menu-right padding-all j-content">
        <ul>
            <!-- <li class="w-3"><a href="pro_list.html"></a> <img src="upload/pro3.jpg"><span>酒水食品酒水食品酒水食品</span></li> -->
        </ul>
    </section>
</div>
{/block}

{block name="script"}
<script type="text/javascript">
$(function($){
    var current_id = $('#sidebar ul li.active').data('id');
    getGoodsList(current_id);
    $('#sidebar ul li').click(function(){
        $(this).addClass('active').siblings('li').removeClass('active');
        var index = $(this).index();
        $('.j-content').eq(index).show().siblings('.j-content').hide();
    })

    function getGoodsList(id) {
        $.ajax({
            url: "{:url('category/goods')}",
            type: 'GET',
            data: {category_id: id},
            success: function(data) {
                var html = '';
                if(data.data) {
                    $.each(data.data, function(k, v) {
                        html += '<li class="w-3"><a href="/index/goods/detail/id/'+v.id+'"></a> <img src="'+v.cover+'"><span>'+v.name+'</span></li>';
                    });
                    $('.j-content ul').html(html);
                }
            }
        })
    }
})
</script>
{/block}
